<template>
  <div class="table">
    <!-- 顶部搜索区域 -->
    <el-card>
      <el-form v-model="searchDate" ref="searchRef" label-width="100px" class="demo-ruleForm">
        <el-row class="demo-ruleForm-row">
          <el-col :span="6" class="demo-ruleForm-col">
            <el-form-item label="活动名称" prop="name">
              <el-input placeholder="请输入招标项目名称" v-model="searchDate.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="活动名称" prop="value">
              <el-date-picker v-model="searchDate.value" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="活动名称" prop="value1">
              <el-date-picker v-model="searchDate.value1" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" >
            <div class="search_col">
              <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
              <el-button type="primary" size="mini" @click="resetForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row>
        <el-col :span="6">
          <el-button icon="el-icon-plus" type="primary" size="mini" @click="addDialogVisible = true">新增项目</el-button>
          <el-button icon="el-icon-files" type="primary" size="mini">导出文件</el-button>
        </el-col>
      </el-row>
      <!-- <el-checkbox v-model="checked" @change="handleCheckAllChange(checked)">全选</el-checkbox>
      <el-checkbox v-model="isChecked" :disabled="checkboxList.length === 0" @change="handleIsCheckAllChange(isChecked)">反选</el-checkbox> -->
      <el-table
      :data="tableDate"
      :row-class-name="tableRowClassName"
      style="width: 100%"
      border
      ref="refTable"
      :header-cell-style="{
        'background-color': '#CBD9EC',
        color: '#fff',
        'font-weight': '400',
      }"
      @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <!-- <el-table-column label="选择" width="60">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.status" @change="handleCheckedCitiesChange(scope.row)"></el-checkbox>
          </template>
        </el-table-column> -->
        <el-table-column width="60" label="序号" type="index"></el-table-column>
        <el-table-column prop="name" label="招标项目名称" width="240"> </el-table-column>
        <el-table-column prop="info_number" label="招标编号"> </el-table-column>
        <el-table-column prop="announcement" label="公式"> </el-table-column>
        <el-table-column prop="time" label="开标时间"> </el-table-column>
        <el-table-column prop="region" label="地区"> </el-table-column>
        <el-table-column prop="procurement_people" label="采购人"></el-table-column>
        <el-table-column prop="procurement_contact" label="采购联系人"> </el-table-column>
        <el-table-column prop="responsibility" label="项目负责人"></el-table-column>
        <el-table-column prop="mobile" label="联系方式"></el-table-column>
        <el-table-column prop="procurement_way" label="采购方式"></el-table-column>
        <el-table-column prop="money" label="预算/拟分包金额（万元）"></el-table-column>
        <el-table-column label="状态" width="100"> 
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row.status">未审批</el-tag>
            <el-tag size="medium" v-else>已通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" class="operation">
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary" size="mini" @click="checkClick">查看</el-button>
            </el-row>
            <el-row class="batch_row">
              <el-button type="primary" size="mini" @click="batchClick(scope.index,scope.row)">审批</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.mount"
        :page-sizes="[1, 3, 6, 10]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增弹框 -->
    <el-dialog
    title="新增项目基本信息"
    :visible.sync="addDialogVisible"
    @close="addDialogVisibleClosed"
    width="50%">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="招标名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="招标编号" prop="info_number">
          <el-input v-model="addForm.info_number"></el-input>
        </el-form-item>
        <el-form-item label="公告" prop="announcement">
          <el-input v-model="addForm.announcement"></el-input>
        </el-form-item>
        <el-form-item label="开标时间" prop="time">
          <el-input v-model="addForm.time"></el-input>
        </el-form-item>
        <el-form-item label="地区" prop="region">
          <el-input v-model="addForm.region"></el-input>
        </el-form-item>
        <el-form-item label="采购人" prop="procurement_people">
          <el-input v-model="addForm.procurement_people"></el-input>
        </el-form-item>
        <el-form-item label="采购联系人" prop="procurement_contact">
          <el-input v-model="addForm.contact"></el-input>
        </el-form-item>
        <el-form-item label="项目负责人" prop="responsibility">
          <el-input v-model="addForm.responsibility"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="采购方式" prop="procurement_way">
          <el-input v-model="addForm.procurement_way"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  data() {
    return {
      // 搜索数据
      searchDate: {
        name: '',
        // 开始时间
        value: '',
        // 结束时间
        value1: '',
      },
      
      // 第一个表格
      tableDate: [
        {
          id: 1,
          name: '国网江西省电力有限公司上饶供电分公司集体企业2020年第002批物资类招标',
          info_number: 'JXRY2020-SR-002-JT(WZ)',
          announcement: '公告',
          time: '2020年6月6日下午16:30时',
          region: '地区',
          procurement_people: '采购人',
          procurement_contact: '采购联系人',
          responsibility: '项目负责人',
          mobile: '联系方式',
          procurement_way: '采购方式',
          money: 383.46696,
          status: false,
        },
        {
          id: 2,
          name: '国网江西省电力有限公司上饶供电分公司集体企业2020年第002批物资类招标',
          info_number: 'JXRY2020-SR-002-JT(WZ)',
          announcement: '公告',
          time: '2020年6月6日下午16:30时',
          region: '地区',
          procurement_people: '采购人',
          procurement_contact: '采购联系人',
          responsibility: '项目负责人',
          mobile: '联系方式',
          procurement_way: '采购方式',
          money: 383.46696,
          status: false,
        },
        {
          id: 3,
          name: '国网江西省电力有限公司上饶供电分公司集体企业2020年第002批物资类招标',
          info_number: 'JXRY2020-SR-002-JT(WZ)',
          announcement: '公告',
          time: '2020年6月6日下午16:30时',
          region: '地区',
          procurement_people: '采购人',
          procurement_contact: '采购联系人',
          responsibility: '项目负责人',
          mobile: '联系方式',
          procurement_way: '采购方式',
          money: 383.46696,
          status: false,
        }
      ],
      // 控制全选按钮是否选中
      checked: false,
      // 存储选中的数据
      checkboxList: [],
      // 控制反选按钮是否选中
      isChecked: false,

      // 分页数据
      page: {
        // 每页显示几条数据
        size: 6,
        // 当前页码值
        mount: 0,
      },
      // 总数据条数
      total: 6,
      isShow: false,

      // 新增弹框数据区域
      // 控制新增弹框的显示与隐藏
      addDialogVisible: false,
      // 弹框数据
      addForm: {
        name: '',
        info_number: '',
        announcement: '',
        time: '',
        region: '',
        procurement_people: '',
        procurement_contact: '',
        responsibility: '',
        mobile: '',
        procurement_way: '',
      },
      // 弹框表单验证规则对象
      addFormRules: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        info_number: [
          { required: true, message: '请输入招标编号', trigger: 'blur' }
        ],
        announcement: [
          { required: true, message: '请输入公告', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请输入开标时间', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请输入地区', trigger: 'blur' }
        ],
        procurement_people: [
          { required: true, message: '请输入采购单位', trigger: 'blur' }
        ],
        procurement_contact: [
          { required: true, message: '请输入采购单位联系人', trigger: 'blur' }
        ],
        responsibility: [
          { required: true, message: '请输入项目负责人', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        procurement_way: [
          { required: true, message: '请输入采购方式', trigger: 'blur' }
        ],
      },

    }
  },
  methods: {
    // 重置事件
    resetForm() {
      this.searchDate.name = '';
      this.searchDate.value = '';
      this.searchDate.value1 = '';
    },
    // 点击全选按钮
    handleCheckAllChange(val) {
      // 点击全选，反选不能被选中
      this.isChecked = false;
      // console.log(val);
      // 遍历数组，得到数组中的对象
      for(let item of this.tableDate) {
        // 点击全选，每一个对象的 status都要进行取反
        item.status = true;
      }
      // console.log(this.tableDate);
      // 用三元运算符给 checkboxList 进行赋值
      this.checkboxList = val ? this.tableDate : [];
      // console.log(this.checkboxList);
    },
    // 点击复选框时触发
    handleCheckedCitiesChange(row) {
      // 判断status是否为true
      if(row.status) {
        // 如果为true，则在 checkboxList 末尾增加数据
        this.checkboxList.push(row);
      }else {
        // 如果为false，则删除
        this.checkboxList = this.checkboxList.filter(item => item.status === true)
      }
      // console.log(this.checkboxList);
      this.checkedAll();
    },
    // 全选按钮是否选中
    checkedAll() {
      // 判断 checkboxList的长度 是否等于 tableDate长度
      if(this.checkboxList.length === this.tableDate.length) {
        // 如果相等，说明全选按钮要被选中
        this.checked = true;
      } else {
        // 如果不相等，则全选按钮不被选中
        this.checked = false;
      }
    },
    // 点击反选
    handleIsCheckAllChange(val) {
      // 点击反选，全选则不能被选中
      this.checked = false;
      // 点击了反选，就要清空 checkboxList 数组，才能重新添加数据
      this.checkboxList = [];
      // console.log(val);
      // 遍历得到 tableDate 中的对象
      for(let item of this.tableDate) {
        // 判断 对象的 status 是否为 true
        if(item.status) {
          // 如果为 true，则变为 false
          item.status = false;
        } else {
          // 如果为 false则变为 true
          item.status = true;
          this.checkboxList.push(item);
        }
      }
      console.log(this.checkboxList);
    },

    // 全选
    handleSelectionChange(val) {
      this.checkboxList = val;
      console.log(this.checkboxList);
    },


    // 每页数据显示条数改变时触发
    handleSizeChange(newSize) {
      console.log(newSize)
    },
    // 页码值发生改变时触发
    handleCurrentChange(newPage) {
      console.log(newPage)
    },

    // 隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    // 单击查询
    checkClick() {
      this.$router.push('/check');
    },
    // 点击审批
    batchClick(index, row) {
      console.log(row);
    },

    // 监听新增弹框的显示与隐藏
    addDialogVisibleClosed() {
      this.$refs.addFormRef.resetFields();
    },

    
    // tab栏选中项改变时触发
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
  created() {
    console.log(this.tableDate)
  },
}
</script>

<style scoped>
.demo-ruleForm-row,
.demo-ruleForm-col {
  height: 42px !important;
}
.search_col {
  width: 100%;
  height: 100%;
  margin-top: 7px;
  margin-left: 30px;
}
.el-pagination {
  float: right;
  margin: 16px;
}

.el-input__inner {
  height: 30px !important;
}
<<<<<<< HEAD
.box {
  display: flex;
  justify-items: center;
  align-items: center;
  margin-left: 20px;
  width: 100%;
}
.box p {
  font-size: 14px;
  color: rgb(45, 135, 238);
}
=======

>>>>>>> ba683ca (第八次提交)
.el-row{
  margin-left: 20px;
}
.el-input,
.el-time-picker {
  flex: 1;
}
.el-dialog__body{
  display: flex;
}

.batch_row {
  margin-top: 10px;
}
</style>